"use client";

import { useRef, useState, useEffect } from "react";
import { AboutMe } from "@/components/resume/AboutMe";
import { WorkExperience } from "@/components/resume/WorkExperience";
import { Education } from "@/components/resume/Education";
import { Projects } from "@/components/resume/Projects";
import { WorkModal } from "@/components/resume/WorkModal";
import { Intro } from "@/components/resume/Intro";
import { Contact } from "@/components/resume/Contact";
import { useScrollAnimation } from "@/hooks/useScrollAnimation";
import { Section } from "@/components/layout/ResumeLayout";
import { calculateWorkYears } from "@/utils/dateUtils";
import { ProjectModal } from "@/components/resume/ProjectModal";
import { Navigation } from "@/components/layout/Navigation";

export default function Home() {
  const containerRef = useRef(null);
  const { scrollYProgress } = useScrollAnimation(containerRef as unknown as React.RefObject<HTMLElement>);

  const [selectedProject, setSelectedProject] = useState<any | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedWork, setSelectedWork] = useState<any | null>(null);

  useEffect(() => {
    document.body.style.overflow = isModalOpen ? "hidden" : "auto";
    return () => {
      document.body.style.overflow = "auto";
    };
  }, [isModalOpen]);

  return (
    <>
      <Navigation />
      <div ref={containerRef} className="h-[600vh]">
        <Section scrollProgress={scrollYProgress} scrollRange={[0, 0.2]} backgroundColor="bg-gradient-to-r from-blue-50 to-purple-50">
          <Intro />
        </Section>

        <Section scrollProgress={scrollYProgress} scrollRange={[0.2, 0.4]} backgroundColor="bg-blue-50">
          <AboutMe calculateWorkYears={calculateWorkYears} />
        </Section>

        <Section scrollProgress={scrollYProgress} scrollRange={[0.4, 0.6]} backgroundColor="bg-green-50">
          <WorkExperience setSelectedWork={setSelectedWork} />
        </Section>

        <Section scrollProgress={scrollYProgress} scrollRange={[0.6, 0.8]} backgroundColor="bg-purple-50">
          <Education />
        </Section>

        <Section scrollProgress={scrollYProgress} scrollRange={[0.8, 1.0]} backgroundColor="bg-yellow-50">
          <Projects setSelectedProject={setSelectedProject} setIsModalOpen={setIsModalOpen} />
        </Section>

        <Section scrollProgress={scrollYProgress} scrollRange={[1.0, 1.2]} backgroundColor="bg-gradient-to-r from-purple-50 to-pink-50">
          <Contact />
        </Section>

        {selectedWork && <WorkModal selectedWork={selectedWork} setSelectedWork={setSelectedWork} />}
        {selectedProject && isModalOpen && (
          <ProjectModal
            selectedProject={selectedProject}
            setSelectedProject={setSelectedProject}
            setIsModalOpen={setIsModalOpen}
          />
        )}
      </div>
    </>
  );
}
